
$(document).ready(function(){
    var count=0;
    var oCon= document.getElementById("content");
    var input = document.getElementById("file_input");
    var oLi1=oCon.getElementsByTagName('li')[0];
    var H=oLi1.offsetWidth+'px';
    var file;

    oLi1.style.height=H;
    function setHeight(){
        var aLi=oCon.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++){
            aLi[i].style.height=H;
        }
    }


    if(typeof FileReader==='undefined'){
        oCon.innerHTML = "您的页面不支持 FileReader";
        input.setAttribute('disabled','disabled');
    }else{
        input.addEventListener('change',readFile,false);
    }

    //动态设置图片的显示方式
    function setImg(){
        var aImg=oCon.getElementsByTagName('img');
        for(var i=0;i<aImg.length;i++){
            var H=aImg[i].offsetHeight;
            var W=aImg[i].offsetWidth;
            if(H>W){
                aImg[i].style.width='100%';
            }else if(W>H){
                aImg[i].style.height='100%';
            }else{
                aImg[i].style.width='100%';
            }
        }

    }
    //获取用户上传的文件以及生成缩略图
    function readFile(){
        file = this.files;
        for(var i=0;i<file.length;i++){
            var reader = new FileReader();
            reader.readAsDataURL(file[i]);
            reader.onload = function(e){
                var oLi=document.createElement('li');
                count++;
                oLi.innerHTML='<div><span class="l-cover" style="display: none;"></span><img src="'+this.result+'" alt=""/></div>';
                oLi.style.height=oLi.offsetWidth+'px';
                oLi.className='imglist';
                oCon.insertBefore(oLi,oCon.childNodes[0]);
                setHeight();
                setImg();
                if(count>20){
                    var aLi=oCon.getElementsByTagName('li');
                    for(var i=20;i<aLi.length;i++){
                        aLi[i].remove();
                    }
                }
            };
        }
    }

    //下一步事件（判断照片数量以及隐藏显示相应的模块）
    $('.next').on('touchstart',function(){
        if(count<10){
            alert('照片数量在10到20张之间');
            return;
        }
        $('.change-cov,.sub').css('display','block');
        $('.add,.hints,.contant,.contant-i,.message,.next').css('display','none');
        $('#main-img').attr('src',$('.imglist img').eq(0).attr('src'));
        cover();
    });

    //缩略图的遮罩层效果以及更换主图
    var cover=function(){
        $('.imglist').each(function(i){
            var index=$('.imglist').index(this);
            $(this).on('touchstart',function(ev){
                $('.photo-index').attr('value',index);
                //alert(index);
                $('.l-cover').each(function(i){
                    $('.l-cover').eq(i).css('display','none');
                    $('.l-cover').eq(index).css('display','block');
                });

                $('#main-img').attr('src',$('.imglist img').eq(index).attr('src'));
                ev.preventDefault();
            });
        });
    };

});